doctype html
html
	head
		meta(charset="utf-8")
		meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
		include ../common/nfile
		script(src="#{base}/js/jquery.min.js",type="text/javascript",charset="utf-8")
		script(src="#{base}/js/utils.js",type="text/javascript",charset="utf-8")
		script(src="#{base}/ace/ace.js",type="text/javascript",charset="utf-8")
		script(src="#{base}/ace/ext-statusbar.js",type="text/javascript",charset="utf-8")
		script(src="#{base}/ace/ext-language_tools.js",type="text/javascript")
		script(src="#{base}/ace/ext-beautify.js",type="text/javascript")
		script(src="#{base}/vkbeautify/vkbeautify.0.99.00.beta.min.js",type="text/javascript")
		style.
			body {
					overflow: hidden;
			}
			#editor {
					margin: 0;
					position: absolute;
					top: 0;
					bottom: 20px;
					left: 0;
					right: 0;
					font-size: 16px;
			}
			#statusBar {
					margin: 0;
					padding: 0;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: 20px;
					background-color: rgb(245, 245, 245);
					color: gray;
			}
			.ace_status-indicator {
					color: gray;
					position: absolute;
					right: 0;
					border-left: 1px solid;
			}
			.float-frame {
					position: fixed;
					width: 500px;
					height: 700px;
					right: 30px;
					top: 30px;
					border: 1px solid gray;
					opacity: 1;
					z-index: 10;
					background: white;
			}
			.float-frame iframe {                
					border: none;
					padding-top: 25px;
					box-sizing: border-box;
			}
			.float-frame-title {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					margin: 0;
					background: transparent;
					padding: 0px 0px 6px 6px;
					background-color: #95B8E7;
					box-sizing: border-box;
					cursor: move;
			}
				.float-frame-title span {
						font-size: 12px;
						font-weight: bold;
						color: #0E2D5F;
						height: 16px;
						line-height: 16px;
				}
				.float-frame-title a {
						content: "x";
						opacity: 1;
						filter: alpha(opacity=100);
						background-color: #eaf2ff;
						-moz-border-radius: 3px 3px 3px 3px;
						-webkit-border-radius: 3px 3px 3px 3px;
						border-radius: 3px 3px 3px 3px;
						display: inline-block;
						width: 16px;
						height: 16px;
						background: url('#{base}/theme/default/images/panel_tools.png') no-repeat -16px 0;
						position: absolute;
						top: 5px;
						right: 5px;
				}
	body
			#editor #{content}
			#statusBar
			script
					| ace.require("ace/ext/language_tools");
					| var StatusBar = ace.require("ace/ext/statusbar").StatusBar;
					| var editor = ace.edit("editor");
					| editor.setTheme(Theme.getCurrentTheme());
					| editor.setOption("highlightActiveLine", true);
					| editor.setOption("enableBasicAutocompletion", true);
					| editor.setOption("enableSnippets", true);
					| editor.setOption("enableLiveAutocompletion", true);
					| editor.languageMode = "#{ext}";
					| editor.lastModifiedTime = "#{mtime}";
					| editor.path = "#{pp}";
					| var statusBar = new StatusBar(editor, document.getElementById("statusBar"));
					if ext == 'js'
							| editor.getSession().setMode("ace/mode/javascript");
					else if ext == "jsx"
							| editor.getSession().setMode("ace/mode/jsx");
					else if ext == 'xml'
							| editor.getSession().setMode("ace/mode/xml");
					else if ext == 'xsd'
							| editor.getSession().setMode("ace/mode/scheme");
					else if ext == 'css'
							| editor.getSession().setMode("ace/mode/scss");
					else if ext == 'xsl'
							| editor.getSession().setMode("ace/mode/xml");
					else if ext == 'md'
							| editor.getSession().setMode("ace/mode/markdown");
					else if ext == "html"
							| editor.getSession().setMode("ace/mode/html");
					else if ext == "java"
							| editor.getSession().setMode("ace/mode/java");
					else
							| editor.getSession().setMode("ace/mode/text");
			script.
				editor.isWrapOn = true;
				editor.getSession().setUseWrapMode(true);
				editor.getSession().setWrapLimitRange();
				editor.commands.addCommands([{
					name: "showSettingsMenu",
					bindKey: {win: "Ctrl-s", mac: "Command-s", sender: "editor"},
					exec: function(editor) {
							var value = editor.getValue();
							var oldValue = editor.lastValue;
							if(oldValue!=value){
									jQuery.post("save", {content: value, ext: "#{ext}", path: "#{pp}", "mtime": editor.lastModifiedTime}, function(result){
											Utils.handleResult(result, function(){
													if (result && result.code == "1") {
															editor.lastValue = value;
															editor.lastModifiedTime = result.mtime;
															onHandleNotify("<span style='color: red;'>保存成功～～<span>");
													}
													else {
																	onHandleNotify("<span style='color: red;'>" + result.message || "保存失败，请稍后再试～～" + "<span>");
															}
													});

											});
									}
									else{
											onHandleNotify("<span style='color: red;'>保存成功～～<span>");    
									}
							},
							readOnly: true
					}]);
					editor.commands.addCommands([
							{
									name: "toggleUserWrap",
									bindKey: {win: "Ctrl-q", mac: "Command-q", sender: "editor"},
									exec: function(editor){
											var isOn = editor.isWrapOn;
											if(isOn){
													editor.getSession().setUseWrapMode(false);
													onHandleNotify("<span style='color: red;'>自动换行关闭～～<span>");
											}
											else{
													editor.getSession().setUseWrapMode(true);
													editor.getSession().setWrapLimitRange();
													onHandleNotify("<span style='color: red;'>自动换行打开～～<span>");
											}
											editor.isWrapOn = !isOn;
									},
									readOnly: false
							}
					, {
						name: "changeThmeme",
						bindKey: {win: "Alt-t", mac: "Alt-t"},
						exec: function(editor){
									editor.setTheme(Theme.getNextTheme());
									onHandleNotify("<span style='color: red;'>Theme改为：" + Theme.getCurrentThemeName() + "<span>");    
							}
					}, {
							name: "bueatifyCode",
							bindKey: {win: "Ctrl-b", mac: "Command-b"},
							exec: function(editor){
									if(editor.languageMode == "js"){
											var Beautify = ace.require("ace/ext/beautify");
											Beautify.beautify(editor.getSession());
											onHandleNotify("<span style='color: red;'>美化js代码<span>");        
									}
									else if(editor.languageMode == "xml" || editor.languageMode == "xsd"){
											var value = editor.getValue();
											var newValue = vkbeautify.xml(value, 4); 
											editor.getSession().doc.setValue(newValue);
											onHandleNotify("<span style='color: red;'>美化" + editor.languageMode + "代码<span>");        
									}
									else{
											onHandleNotify("<span style='color: red;'>不支持该格式的美化<span>");            
									}
							}
					}]);
					function onHandleNotify(str){
							var dom = $("#notify"), el;
							if(dom.length == 0){
									dom = $("<span id='notify'></span>").appendTo("#statusBar");
							}
							el = dom.get(0);
							if(el.timer){
									window.clearTimeout(el.timer);
							}
							dom.html(str).show();
							el.timer = window.setTimeout(function(){
									dom.hide();
									el.timer = null;
							}, 1500);
					}
			if ext === "md"
					div.float-frame
							div.float-frame-title
									span 预览效果
									a.float-frame-close(style="display:none;")
							iframe#editViewer(height="100%",width="100%",scroll="auto",style="display:none;")
					script(type="text/javascript",src="#{base}/js/readme-editor.js")

